<template>
    <div class="app-container">
      <div>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="queryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="用户状态"
              clearable
              style="width: 240px"
            >
              <el-option :label="'启用'" :value="0" />
              <el-option :label="'禁用'" :value="-1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
  
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['biz:residentCompany:add']"
              >新增</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :data="tableList"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column
            label="企业编码"
            align="center"
            key="companyCode"
            width="150"
            :show-overflow-tooltip="true"
            prop="companyCode"
          />
          <el-table-column
            label="企业名称"
            key="companyName"
            prop="companyName"
            width="300"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="简称"
            key="companyAbbreviation"
            prop="companyAbbreviation"
            width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="责任单位"
            key="createCompany"
            prop="createCompany"
            width="250"
            :show-overflow-tooltip="true"
          />            
          <el-table-column
            label="企业联系人"
            width="130"
            key="contacts"
            prop="contacts"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="联系电话"
            width="130"
            key="mobile"
            prop="mobile"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="状态" align="center" key="status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                disabled
                inactive-value="-1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>        
          <el-table-column
            label="车辆数量"
            key="vehicleCount"
            prop="vehicleCount"
            width="120"
          />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
  
      <!-- 添加或修改用户配置对话框 -->
      <add-or-edite-dialog :open="open"  :title="title" @cancel="cancel" :id="companyId" @submit-form="submitForm"></add-or-edite-dialog>
      <!-- 详情页 -->
      <detail :visible.sync="detailVisible" :data="currentRow"></detail>
    </div>
  </template>
  
  <script>
  import {
    listCompany,
    delCompany,
  } from "@/api/transport";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { Detail,AddOrEditeDialog,UploadData } from "./component/index.js";
  export default {
    name: "transportCompany",
    dicts: ["company_size", "company_type"],
    components: {  Detail,AddOrEditeDialog,UploadData },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        tableList: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 导入弹框
        uploadOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          companyCode: undefined,
          companyName: undefined,
          companySize: undefined,
          companyType: undefined,
          status: "",
        },
        detailVisible: false, // 是否显示详情弹窗
        currentRow: {},
        dateRange: [],
        companyId:null,
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listCompany(this.addDateRange(this.queryParams, this.dateRange))
          .then((response) => {
            this.tableList = response.rows;
            this.total = response.total;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /*  多选框选中数据 */
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.open = true;
        this.title = "添加企业";
      },
       /* 新增修改弹框取消按钮 */
      cancel() {
        this.open = false;
      },
      /** 提交按钮 */
      submitForm: function () {
        this.open = false;
        this.getList();
      },
    },
  };
  </script>